import Tip from '@/components/tip/Tip';
import { LoadingOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { memo, useEffect } from 'react';
import { Link } from 'react-router-dom';

interface Props {
  title?: string;
  count?: number;
  onClick?: () => void;
  className?: string;
  actionTitle?: string;
  actionTip?: string;
  tip?: React.ReactNode;
  route?: string;
}

const TodoItem = ({
  title = '标题',
  count = -1,
  className,
  onClick,
  actionTitle = '立即治理',
  actionTip = '待处理',
  tip,
  route,
}: Props) => {
  useEffect(() => {
    if (count) {
    }
  }, [count]);

  return (
    <div className={`flex flex-col items-center justify-center ${className}`}>
      <div className="m-auto">
        <div className="mt-4  flex-col items-center">
          <div>
            {count >= 0 && <span className="text-4xl text-primary md:text-6xl">{count}</span>}
            {count === -1 && (
              <span className="text-4xl text-primary md:text-6xl">
                {' '}
                <LoadingOutlined />
              </span>
            )}
            <span className="text-sm text-[#86909C]">条{actionTip}</span>
          </div>
        </div>
        <div className="mb-4 mt-3 text-center">
          <span className="text-xl font-bold text-[#1D2129] md:text-4xl">{title}</span>{' '}
          <Tip className="know-gov-tooltip text-[20px] text-[#86909C]" title={tip!} />
        </div>

        {/* <Link to={route!} className="mt-4 text-sm text-[#474C5F]"> */}
        <Button className="mt-4" type="primary" onClick={onClick}>
          {actionTitle}
        </Button>
        {/* </Link> */}
      </div>
    </div>
  );
};

export default memo(TodoItem);
